<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <meta charset="utf-8">
    <link href="css/chatList.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>
<div id="app">
    <div class="top">
        <p style="margin-left: 1%; float:left; width: 20%; line-height: 60px;text-align: center; overflow: hidden;height: 60px;"></p>
        <p style="margin-left: 5%;margin-right: 5%; float:left; width: 50%; line-height: 60px; text-align: center">客服({{getAllNeedViewMessage(allNeedViewMessage.num)}})</p>
        <p style="margin-right: 1%; float:right; width:15%;  line-height: 60px;text-align: center">+</p>
        <div style="clear: both"></div>
    </div>
    <div class="mid">
        <div class="mid-body">
            <ul style="padding: 0" id="chatList">
                <li v-for="data in chatList" class="user-li" v-on:click="intoChatInfo(data.userid)">
                    <div class="user-info">
                        <div>
                            <img :src="data.img" alt="" class="user-img">
                        </div>
                        <div>
                            <p class="user-time">{{data.date}}</p>
                            <p class="user-name">{{data.name}}</p>
                            <p class="user-newmsg">{{getAllNeedViewMessage(data.len)}}</p>
                            <p class="user-word">{{data.word}}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="foot">
        <div class="foot-body">
            <div class="foot-box">
                <p>客服({{getAllNeedViewMessage(allNeedViewMessage.num)}})</p>
            </div>

            <div class="foot-box">
                <p>我的好友</p>
            </div>

            <div class="foot-box">
                <p>个人中心</p>
            </div>
        </div>
    </div>
</div>

<script>
    parent.all.wsGetChatList();
    var app = new Vue({
        el: '#app',
        data: {
            chatList: parent.all.chatList,
            my: parent.all.my,
            allNeedViewMessage: parent.all.allNeedViewMessage
        },
        methods: {
            //待接收消息判断
            getAllNeedViewMessage: function (num) {
                var afterDeal = num;
                if (afterDeal > 99) {
                    afterDeal = '99+'
                }
                console.log(afterDeal);
                return  afterDeal
            },
            //跳转到聊天
            intoChatInfo: function (user) {
                window.location.href = 'chatInfo.html?user='+user;
            },

        },
    })

</script>

</body>
</html>